// 地图hover事件
function HoverFn() {
    $('.mapActived1').hover(function () {
        $(".mapImg").attr("src", "./img/map1.png");
        $(".mapContent1,.mapContent2,.mapContent3").hide();
        $(".mapContent1").slideDown(500);
    }, function () {

    });
    // $('.mapActived2').hover(function () {
    //     $(".mapImg").attr("src", "./img/map2.png");
    //     $(".mapContent1,.mapContent2,.mapContent3").hide();
    //     $(".mapContent2").slideDown(500);
    // }, function () {
    // });
    // $('.mapActived3').hover(function () {
    //     $(".mapImg").attr("src", "./img/map3.png");
    //     $(".mapContent1,.mapContent2,.mapContent3").hide();
    //     $(".mapContent3").slideDown(500);
    // }, function () {
    // });
}
HoverFn();
$('.boxLis').on('mouseenter', 'li', function () {

    var that = $(this);

    that.addClass('active').siblings().removeClass('active');

    $('.content1 .contList').hide();

    console.log($('.content1 li'))

    $('.content1 .contList').eq(that.index()).show()


});
// var HYChart1 = echarts.init(document.getElementById('wind'));
var HYChart2 = echarts.init(document.getElementById('Progress'));
// var HYChart3 = echarts.init(document.getElementById('mains'));
/**
 * times:YYYY-mm-dd HHMMSS
 * timeData:时间
 * windsData:风速
 * windxData:风向/等级
 * temData:温度
 * ,rainData:降水
 * humData:湿度
 */
let Data = {
    times: ["2019-10-28 11:00:00", "2019-10-28 12:00:00", "2019-10-28 13:00:00", "2019-10-28 14:00:00", "2019-10-28 15:00:00", "2019-10-28 16:00:00", "2019-10-28 17:00:00", "2019-10-28 18:00:00", "2019-10-28 19:00:00", "2019-10-28 20:00:00", "2019-10-28 21:00:00", "2019-10-28 22:00:00"],
    timeData: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
    windxData: ["东南", "北", "东南", "东", "东南", "东南", "西", "北", "南", "东南", "东南", "东南"],
    windsData: ["2.8/2", "1.4/1", "2.7/2", "3/2", "2.2/2", "1.4/1", "1.5/1", "1.9/2", "1.4/1", "1.8/2", "2/2", "3.4/3"],
    temData: [9, 11, 13, 12, 11, 9, 9, 7, 6, 4, 3, 3],
    rainData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    humData: [76, 76, 70, 62, 58, 53, 50, 49, 46, 44, 44, 42],
};

function windDen(wind) {
    switch (wind) {
        case '北': return 'n';
        case '东北': return 'ne';
        case '东': return 'e';
        case '东南': return 'se';
        case '南': return 's';
        case '西南': return 'sw';
        case '西': return 'w';
        case '西北': return 'nw';
        default: return ''
    }
}

let colors = ['#FF6863', '#6EAB40', '#3BB5F5'];

option = {
    color: colors,
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' },
        formatter: function (params, ticket, callback) {
            let index = params[0].dataIndex;
            let Htm = `今年：${Data.temData[index]}次<br>去年：${Data.humData[index]}次`;
            return Htm;
        }
    },
    legend: {
        x: 'center',
        data: ['去年巡检', '今年巡检'],
        textStyle: {
            color: "#fff",
            fontSize: 12
        },
        itemWidth: 8,
        itemHeight: 8,
    },
    grid: {
        top: '17%',
        bottom: '15%',
        left: '13%',
        right: '12%'
    },

    xAxis: [
        {
            type: 'category',
            position: 'bottom',
            offset: 0,
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    // opacity: 0.1,
                }
            },
            axisLine:{
                lineStyle:{
                    color:'rgba(255,255,255,.2)',
                }
            },
            data: Data.timeData
        }
    ],
    yAxis: [{
        type: 'value',
        name: '今年(2021)',
        scale: true,
        position: 'left',
        offset: 0,
        axisTick: { lineStyle: { color: colors[0] }, inside: true },
        nameTextStyle: { color: colors[0] },
        axisLabel: { color: colors[0] },
        splitLine: { show: false }
    },
        {
            type: 'value',
            name: '去年(2020)',
            scale: true,
            position: 'right',
            axisTick: { lineStyle: { color: colors[2] }, inside: true },
            nameTextStyle: { color: colors[2] },
            axisLabel: { color: colors[2] },
            splitLine: { show: false }
        }
    ],
    series: [{
        name: '去年巡检',
        type: 'line',
        step: false,
        label: { normal: { show: true, position: 'top' } },
        data: Data.temData
    },
        {
            name: '今年巡检',
            type: 'line',
            step: false,
            yAxisIndex: 1,
            color: colors[2],
            label: { normal: { show: true, position: 'top' } },
            data: Data.humData
        }
    ]
};

// 进度条
var baifenbi = [39, 100, 50, 99,50,50, 30, 100, 100,100,20, 100, 20, 100];
var baifenbi1 = [29, 80, 40, 89,40,35, 20, 85, 78,83,20, 75, 20, 80];
// var grayBar = [1, 1, 1, 1,1];
// var zongjine = [100, 100, 100, 100,100,100, 100, 100, 100,100,100, 100, 100, 100];
var xingm = ['乌什水库', '卡因其水库', '别里其水库', '卡尔巴斯水库', '锡伯特水库','小锡伯特水库', '卡布尔哈达水库', '叶其克苏水库', '卡因达水库', '乌塔拉克水库','乌拉斯台水库', '哈姆斯沟水库', '木夫露水库', '莫葫芦水库'].reverse();
// console.log(xingm.reverse())
option2 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
    },
    grid: {
        left: '28%',
        right: '10%',
        top: '5%',
        bottom: '0%',
    },
    legend: {
        textStyle:{
            fontSize: 14,//字体大小
            color: '#ffffff'//字体颜色
        },
    },
    backgroundColor: 'transparent',
    xAxis: [{
        show: false,
    }],
    yAxis: {
        type: 'category',
        data: xingm,
        axisLabel: {
            show: true, //让Y轴数据不显示
            color:'#1BC5CC',
        },
        itemStyle: {

        },
        axisTick: {
            show: false, //隐藏Y轴刻度
        },
        axisLine: {
            show: false, //隐藏Y轴线段
        },
    },
    series: [
        //背景色--------------------我是分割线君------------------------------//
        //
        // {
        //     show: true,
        //     type: 'bar',
        //     barGap: '-100%',
        //     barWidth: '50%', //统计条宽度
        //     itemStyle: {
        //         normal: {
        //             color: '#3B4254'
        //         },
        //     },
        //     z: 1,
        //     // data: grayBar,
        // },
        //蓝条--------------------我是分割线君------------------------------//
        {
            show: true,
            name:'总库容(百万m³)',
            type: 'bar',
            stack:'total',
            emphasis: {
                focus: 'series'
            },
            barWidth: '50%', //统计条宽度
            itemStyle: {
                color: '#0EFCFF',
            },
            label: {
                show:true,
            },
            data: baifenbi,
        },
        {
            show: true,
            type: 'bar',
            name:'当前库容(百万m³)',
            stack:'total',
            label: {
                show: true,
            },
            emphasis: {
                focus: 'series'
            },
            barWidth: '50%', //统计条宽度
            itemStyle: {
                color: '#FA8100',
            },
            data: baifenbi1,
        },
        //数据条--------------------我是分割线君------------------------------//
        // {
        //     show: true,
        //     type: 'bar',
        //     xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
        //     barGap: '-100%',
        //     barWidth: '40%', //统计条宽度
        //     itemStyle: {
        //         normal: {
        //             barBorderRadius: 200,
        //             color: 'transparent'
        //         },
        //     },
        //     label: {
        //         normal: {
        //             show: true,
        //             //label 的position位置可以是top bottom left,right,也可以是固定值
        //             //在这里需要上下统一对齐,所以用固定值
        //             position: ["-28%", '5%'],
        //             rich: { //富文本
        //                 color: { //自定义颜色
        //                     color: '#1BC5CC',
        //                     fontSize: 12
        //                 },
        //                 value: xingm,
        //                 start1: {
        //                 },
        //
        //             },
        //             formatter: function (data) {
        //                 //富文本固定格式{colorName|这里填你想要写的内容}
        //                 return '{start1|}{color|' + xingm[data.dataIndex] + '}'
        //
        //             },
        //         }
        //     },
        //     data: zongjine
        // }

    ]
};

option3 = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        x: 'center',
        data: ['实际填报', '计划填报'],
        textStyle: {
            color: "#fff",
            fontSize: 14
        },
        itemWidth: 8,
        itemHeight: 8,
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            data: ['01', '02', '03', '04', '05'],
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    // opacity: 0.1,
                }
            },
            "axisTick": {       //y轴刻度线
                "show": false
            },
            "axisLine": {       //y轴
                "show": false,
            },
        }
    ],
    yAxis: [
        {
            type: 'value',
            scale: true,
            name: "填报次数/次",
            nameTextStyle: {
                color: 'rgba(255,255,255,.2)',
            },
            max: 100000,
            min: 0,
            boundaryGap: [0.2, 0.2],
            "axisTick": {       //y轴刻度线
                "show": false
            },
            "axisLine": {       //y轴
                "show": false,
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    // opacity: 0.1,
                }
            },
            splitLine: {  //决定是否显示坐标中网格
                show: true,
                lineStyle: {
                    color: ['#fff'],
                    opacity: 0.2
                }
            },
        },
    ],
    color: ['#0efcff', '#F45E23'],
    grid: {
        left: '3%',
        right: '4%',
        top: '25%',
        bottom: '5%',
        containLabel: true
    },
    series: [
        {
            name: '实际填报',
            type: 'bar',
            data: [47800, 55000, 63580, 70000, 82000],
        },
        {
            name: '计划填报',
            type: 'bar',
            data: [28680, 33000, 38148, 45500, 53300],
        }
    ]
};

// HYChart1.setOption(option);
HYChart2.setOption(option2);
// HYChart3.setOption(option3);